<template>
  <div>
    <Dialog
      ref="kc"
      dialogCls="mydlgg"
      headerCls="mydlgg-head"
      footerCls="mydlgg-foot"
      :dialogStyle="{ width: '550px' }"
      :modal="true"
      borderType="thin"
      :draggable="true"
    >
      <div slot="header">
        <span class="headerIcon newlyAdded"></span>
        <span class="titleStyle">考勤设置</span>
      </div>
      <div class="insidePadding">
        <fieldset class="fieldsetStyle" style="height:65px;">
          <legend>
            <b style="color:#293569">月度结算参数</b>
          </legend>
          <div class="layout_padding_10">
            <CheckBox
              inputId="settle"
              ref="ck"
              class="cbs_15"
              v-model="settleDayEnableFlag"
            >
            </CheckBox>
            <Label for="settle">是否启用</Label>
            <!--同行分割-->
            <span
              style="width: 50px;display:-moz-inline-box;display:inline-block;"
            ></span>
            <span class="right_20">
              <Label for="c1">开始日</Label>
              <ComboBox
                inputId="c1"
                v-model="req.settleDayBegin"
                :data="dayList"
                class="ck_width_80"
              ></ComboBox>
            </span>
            <span class="right_20">
              <Label for="c2">结束日</Label>
              <ComboBox
                inputId="c2"
                v-model="req.settleDayEnd"
                :data="dayList"
                class="ck_width_80"
              ></ComboBox>
            </span>
          </div>
        </fieldset>
        <fieldset class="fieldsetStyle" style="height:130px;">
          <legend>
            <b style="color:#293569">申请失效参数</b>
          </legend>
          <div class="layout_padding_10 text_align_r">
            <div class="">
              <Label for="n1">每人每月允许补出勤次数</Label>
              <NumberBox
                inputId="n1"
                :max="1000"
                :min="0"
                v-model="req.repairLimit"
                class="ck_width_80"
              ></NumberBox>
              <span style="margin-left: 5px; ">次</span>
            </div>
            <div>
              <Label for="n2">请假需要提前天数</Label>
              <NumberBox
                inputId="n2"
                :max="1000"
                :min="-1000"
                v-model="req.leaveEarlyDay"
                class="ck_width_80"
              ></NumberBox>
              <span style="margin-left: 5px; ">天</span>
            </div>
            <div>
              <Label for="n3">加班需要提前天数</Label>
              <NumberBox
                inputId="n3"
                :max="1000"
                :min="-1000"
                v-model="req.overtimeEarlyDay"
                class="ck_width_80"
              ></NumberBox>
              <span style="margin-left: 5px; ">天</span>
            </div>
          </div>
        </fieldset>
        <fieldset class="fieldsetStyle" style="height:95px;">
          <legend>
            <b style="color:#293569">加班申请限制</b>
          </legend>
          <div class="layout_padding_10">
            <div class="right_20">
              <Label for="c3">行政岗位级别</Label>
              <ComboBox
                inputId="c3"
                v-model="overtimeRejectAdministrativeArr"
                :data="overtimeRejectAdministrativeList"
                style="width: 60%"
                :multiple="true"
                :textFormatter="formatText"
              ></ComboBox>
            </div>
            <div class="right_20">
              <Label for="c4">技术岗位级别</Label>
              <ComboBox
                inputId="c4"
                v-model="overtimeRejectTechnologyArr"
                :data="overtimeRejectTechnologyList"
                style="width: 60%"
                :multiple="true"
                :textFormatter="formatText"
              ></ComboBox>
            </div>
          </div>
        </fieldset>
      </div>
      <div slot="footer" style="border:none">
        <div class="footerDiv">
          <!-- footer、footerDiv这两个div必须保留 -->
          <LinkButton @click="submitBtn" class="saveBtn">保存</LinkButton>
          <span style="margin:0px 10px;" />
          <LinkButton @click="closeBtn" class="cancelBtn">返回</LinkButton>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script>
import kqConfigApi from "@/api/sys/kqConfig";
import userApi from "@/api/user";

export default {
  name: "kqConfig",
  components: {},
  data() {
    return {
      showFlag: false,
      settleDayEnableFlag: false,
      req: {
        id: "",
        //部门iD(保留)
        deptId: "",
        //是否启用
        settleDayEnable: 0,
        //结算开始日期，
        settleDayBegin: 1,
        //结算结束日期,
        settleDayEnd: 1,
        //补出勤次数
        repairLimit: 0,
        //请假需提前天数
        leaveEarlyDay: 0,
        //加班需提前天数
        overtimeEarlyDay: 0,
        //职务
        overtimeRejectAdministrative: "",
        //岗位
        overtimeRejectTechnology: ""
      },
      dayList: [
        { value: 1, text: "1" },
        { value: 2, text: "2" },
        { value: 3, text: "3" },
        { value: 4, text: "4" },
        { value: 5, text: "5" },
        { value: 6, text: "6" },
        { value: 7, text: "7" },
        { value: 8, text: "8" },
        { value: 9, text: "9" },
        { value: 10, text: "10" },
        { value: 11, text: "11" },
        { value: 12, text: "12" },
        { value: 13, text: "13" },
        { value: 14, text: "14" },
        { value: 15, text: "15" },
        { value: 16, text: "16" },
        { value: 17, text: "17" },
        { value: 18, text: "18" },
        { value: 19, text: "19" },
        { value: 20, text: "20" },
        { value: 21, text: "21" },
        { value: 22, text: "22" },
        { value: 23, text: "23" },
        { value: 24, text: "24" },
        { value: 25, text: "25" },
        { value: 26, text: "26" },
        { value: 27, text: "27" },
        { value: 28, text: "28" },
        { value: 29, text: "29" },
        { value: 30, text: "30" },
        { value: 31, text: "31" }
      ],
      //职务集合
      overtimeRejectAdministrativeList: [],
      //岗位集合
      overtimeRejectTechnologyList: [],
      //职务Arr
      overtimeRejectAdministrativeArr: [],
      //岗位Arr
      overtimeRejectTechnologyArr: []
    };
  },
  mounted() {
    this.$refs.kc.close();
  },
  methods: {
    openDialog() {
      this.initData();
    },
    submitBtn() {
      // 收集信息
      this.req.settleDayEnable = this.$refs.ck.checked == true ? 1 : 0;
      this.req.overtimeRejectAdministrative =
        this.overtimeRejectAdministrativeArr == null
          ? ""
          : this.overtimeRejectAdministrativeArr.sort().join(",");
      this.req.overtimeRejectTechnology =
        this.overtimeRejectTechnologyArr == null
          ? ""
          : this.overtimeRejectTechnologyArr.sort().join(",");

      this.$loading("正在保存，请稍等...");
      // 保存考勤设置
      kqConfigApi.saveKqConfig(this.req).then(res => {
        this.$loading.close();
        if (res.success) {
          this.$messager.alert({
            title: "系统提示",
            icon: "success",
            msg: "保存成功！"
          });
        } else {
          this.$messager.alert({
            title: "系统提示",
            icon: "error",
            msg: res.message
          });
        }
      });
    },
    closeBtn() {
      this.$refs.kc.close();
    },
    //加载配置信息
    async initData() {
      /*加载基础数据*/
      let zw = await userApi.getJobGrade();
      if (zw.success && zw.result.length > 0) {
        zw.result.forEach(v => {
          this.overtimeRejectAdministrativeList.push({
            text: v,
            value: v
          });
        });
      }
      let gw = await userApi.getTechnologicalJob();

      if (gw.success && gw.result.length > 0) {
        gw.result.forEach(v => {
          this.overtimeRejectTechnologyList.push({
            text: v,
            value: v
          });
        });
      }
      /*现有配置数据*/
      let response = await kqConfigApi.getConfigData();
      if (response.success && response.result.length > 0) {
        let params = response.result[0];
        //赋值界面参数
        this.settleDayEnableFlag = params.settleDayEnable == 1 ? true : false;
        this.req.settleDayBegin = params.settleDayBegin;
        this.req.settleDayEnd = params.settleDayEnd;
        this.req.overtimeEarlyDay = params.overtimeEarlyDay;
        this.req.repairLimit = params.repairLimit;
        this.req.leaveEarlyDay = params.leaveEarlyDay;
        this.overtimeRejectAdministrativeArr = params.overtimeRejectAdministrative.split(
          ","
        );
        this.overtimeRejectTechnologyArr = params.overtimeRejectTechnology.split(
          ","
        );
        this.req.deptId = params.deptId;
        this.req.id = params.id;
        /*处理已不存在的岗位和职务*/
        this.overtimeRejectAdministrativeArr = this.overtimeRejectAdministrativeArr.filter(
          v => {
            return zw.result.indexOf(v) != -1;
          }
        );
        this.overtimeRejectTechnologyArr = this.overtimeRejectTechnologyArr.filter(
          v => {
            return gw.result.indexOf(v) != -1;
          }
        );
      }
      this.$refs.kc.open();
    },
    formatText(value) {
      if (value) {
        value = value
          .split(",")
          .sort()
          .join(",");
      }
      return value;
    }
  }
};
</script>
<style>
.right_20 {
  margin-right: 20px;
}

.ck_width_80 {
  width: 80px;
}

.ck_width_180 {
  width: 180px;
}

.layout_padding_10 {
  padding: 2px 10px;
}

.text_align_r {
  text-align: right;
  float: left;
}
</style>
